<template>
    <Tabs @on-click="changeTab"  :value="tab_name">
        <TabPane label="详情" name="summary">
            <div style="margin-left:20px">
                <div style="height:35vw;overflow:auto">
                    <i-col span=12>
                        <div>
                            <p><span>名称:</span>{{ detail.name }}</p>
                            <p><span>命名空间:</span>{{ detail.namespace }}</p>
                            <p><span>节点:</span>{{ detail.node }}</p>
                            <p><span>POD IP:</span>{{ detail.pod_ip }}</p>
                            <p><span>状态:</span>{{ detail.status }}</p>
                            <p><span>镜像拉取密钥:</span>{{ detail.imagePullSecrets }}</p>
                            <p><span>重启策略:</span>{{ detail.restartPolicy }}</p>
                            <p><span>hostNetwork:</span>{{ detail.hostNetwork }}</p>
                            <p><span>节点选择器:</span>{{ detail.nodeSelector }}</p>
                            <p><span>服务账号:</span>{{ detail.serviceAccountName }}</p>
                            <p><span>创建时间:</span>{{ detail.create_time }}</p>
                            <p><span>标签:</span><pre>{{ detail.pod_labels }}</pre></p>
                            <p><span>容忍:</span><pre>{{ detail.tolerations }}</pre></p>
                        </div>
                    </i-col>
                    <i-col span=12>
                        <div>
                            <span>节点亲和性:</span><pre>{{ detail.nodeAffinity }}</pre>
                            <span>POD亲和性:</span><pre>{{ detail.podAffinity }}</pre>  
                            <p><span>卷:</span><pre>{{ detail.volumes }}</pre></p>
                        </div> 
                    </i-col>
                </div>
            </div>
        </TabPane>
        <TabPane label="容器" name="container">
            <Card style="height:35vw;overflow:auto">
                <div class="box">
                    <template v-for="(C,index) in detail.containers">     
                        <div  :key="index">
                            <p><span>名称:</span>{{ C.name }}</p>
                            <p><span>镜像:</span>{{ C.image }}</p>
                            <span>资源:</span><pre>{{ C.resources }}</pre>
                            <p><span>镜像拉取策略:</span>{{ C.image_pull_policy }}</p>
                            <p><span>安全上下文:</span>{{ C.security_context }}</p>
                            <span>生命周期:</span><pre>{{ C.lifecycle }}</pre>
                            <span>端口组:</span><pre>{{ C.ports }}</pre>
                            <span>就绪探测:</span><pre>{{ C.readiness_probe }}</pre>         
                            <span>存活检测:</span><pre>{{ C.liveness_probe }}</pre>
                            <span>参数:</span><pre>{{ C.args }}</pre>
                            <span>指令:</span><pre>{{ C.command }}</pre>
                            <span>env_from:</span><pre>{{ C.env_from }}</pre>
                            <span>环境变量:</span><pre>{{ C.env }}</pre>
                            <span>卷挂载:</span><pre>{{ C.volume_mounts }}</pre>
                        </div>
                    </template>
                </div>
            </Card>
        </TabPane>
        <TabPane label="初始化容器" name="init_container">
            <Card style="height:35vw;overflow:auto">
                <p slot="title">初始化容器</p>
                <div class="box">
                    <template v-for="(initC,index) in detail.initContainers">
                        <div :key="index">
                            <p><span>名称:</span>{{ initC.image }}</p>
                            <p><span>镜像拉取策略:</span>{{ initC.镜像拉取策略 }}</p>
                            <span>资源:</span><pre>{{ initC.resources }}</pre>
                            <span>挂载卷:</span><pre>{{ initC.volume_mounts }}</pre>
                        </div>
                    </template>
                </div>
            </Card>
        </TabPane>
        <TabPane label="事件" name="event">
            <i-table size="default"   border stripe  :columns="event_format" :data="event_list"  :height="sharedState.tableHeight" > 
            </i-table >
        </TabPane>
    </Tabs>
</template>

<script>

// import { post } from  '@/api/http'
import {k8s_cluster_post} from '@/api/http'
import { get_pod_detail} from  '@/api'
import store from '@/store'
export default {
    data() {
        return {
            sharedState: store.state,
            event_format: [
                {
                    title: '消息',key: 'message',width:500,resizable:'true',fixed:'left'
                },
                {
                    title: '原因',key: 'reason',
                },
                {
                    title: '来源',key: 'source',
                },
                {
                    title: '最近出现于',key: 'last_seen',
                },
                {
                    title: '最早出现于',key: 'first_seen',
                },
            ],
            event_list: [],
            detail: {
                affinity: null,
                containers: null,
                hostNetwork: null,
                imagePullSecrets: null,
                initContainers: null,
                node: null,
                nodeAffinity: null,
                nodeSelector: null,
                podAffinity: null,
                podAntiAffinity: null,
                pod_ip: null,
                pod_labels: null,
                restartPolicy: null,
                serviceAccountName: null,
                status: null,
                tolerations: null,
                volumes: null,
                name: '',
                namespace: '',
                labels:'',
                create_time: null,
            },
            // tab切换
            tab_name: "summary"
        }
    },
    methods: {
        // 切换tab点击事件
        changeTab(name){
            this.tab_name = name
            localStorage.setItem("pod_detail_tab_name",name)
        },
        refresh() {
            let query = this.$router.currentRoute.query
            let name = query.name
            let namespace = query.namespace
            if (name == null || namespace == null ){
                this.$Message.error("name,namesapce不能为空")
                return
            }
            let data = {"namespace":namespace,'name':name}
            k8s_cluster_post(get_pod_detail,data).then( (response) => {
                this.detail = response.data
                console.log(this.detail.event_list)
                // this.event_list = JSON.parse(this.detail.event_list)
                this.event_list = this.detail.event_list
            })
        }
    },
    mounted: function() {
        this.refresh()
        let tab = localStorage.getItem("pod_detail_tab_name")
        if(tab) {
            console.log("刷新加载的tab:",tab)
            this.tab_name = tab
        }
    }
}
</script>

<style scoped>
    p {
        margin-bottom: 5px;
    }
    span {
        color: purple;
        margin-right: 20px;
    }
    .box {
        display: flex;
        display: -webkit-flex; 
    }
    .column-2 {
        flex:1;
    } 
    .column-1,.column-2,.column-3 {
        box-sizing: border-box;
    }
</style>
<style >
    pre{
        margin-left:40px;
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>